<template>
  <div class="card">
    <dv-border-box-13 :color="['#168BF9', '#112F7C']">
      <CardTitle title="最新线索">
        <template #decoration>
          <div class="time-tabs">
            <el-radio-group v-model="activeTab" @change="handleTabChange">
              <el-radio-button label="部门">部门</el-radio-button>
              <el-radio-button label="镇街">镇街</el-radio-button>
              <el-radio-button label="其他">其他</el-radio-button>
            </el-radio-group>
          </div>
        </template>
      </CardTitle>
      <div class="table-container">
        <dv-scroll-board
          :config="config"
          style="width: 100%; height: 80%"
          class="custom-scroll-board"
        />
      </div>
    </dv-border-box-13>
  </div>
</template>

<script>
import CardTitle from "../components/card-title.vue"; // 引入标题组件
import { currentPOST } from "api/modules";

export default {
  components: {
    CardTitle,
  },
  data() {
    return {
      activeTab: "部门",
      tableData: [],
      config: {
        header: ["线索名称", "报送单位", "报送人", "截止时间"],
        data: [],
        index: false,
        columnWidth: [300, 120, 100, 160],
        align: ["left", "center", "center", "center"],
        rowNum: 4,
        waitTime: 2000,
        carousel: "single",
        headerBGC: "rgba(5, 64, 128, 0.8)",
        oddRowBGC: "rgba(5, 64, 128, 0.3)",
        evenRowBGC: "rgba(5, 64, 128, 0.1)",
        headerHeight: 40,
        textStyle: {
          color: "#bae7ff",
          fontSize: 13,
        },
        headerTextStyle: {
          color: "#ffffff",
          fontSize: 14,
          fontWeight: "bold",
        },
      },
    };
  },
  computed: {
    cellStyle() {
      return {
        backgroundColor: "transparent",
        color: "#a0d2ff",
        borderBottom: "1px solid rgba(0, 163, 255, 0.3)",
        fontSize: "13px",
        padding: "8px 4px",
        height: "40px",
      };
    },
    headerCellStyle() {
      return {
        backgroundColor: "rgba(0, 102, 204, 0.6)",
        color: "#ffffff",
        borderBottom: "2px solid #00a3ff",
        fontSize: "14px",
        fontWeight: "bold",
        padding: "12px 4px",
      };
    },
  },
  filters: {},
  created() {
    this.getData();
  },
  mounted() {},
  beforeDestroy() {
    this.clearData();
  },
  methods: {
    // Tab切换处理
    handleTabChange() {
      this.getData();
    },

    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },

    getData() {
      // 根据activeTab传递不同的参数给后台
      let params = {
        lastDay: 100,
        pageSize: 1000,
        current: 1,
        organizationType: this.activeTab,
      };

      currentPOST("leftBottomClueListClues", params)
        .then((res) => {
          if (res.code === 0) {
            this.tableData = res.data.data || [];
            this.updateTableConfig();
          } else {
            this.$Message({
              text: res.msg,
              type: "warning",
            });
          }
        })
        .catch((error) => {
          console.error("饼图请求失败:", error);
        });
    },

    // 更新表格配置
    updateTableConfig() {
      // 将API数据转换为表格需要的格式
      const tableData = this.tableData.map((item) => [
        this.formatTitle(item.name), // 线索名称
        item.createdOrganizationName || "--", // 报送单位
        item.createdAccountName || "--", // 报送人
        this.formatDeadlineTime(item.deadlineTime), // 截止时间
      ]);

      // 更新表格配置
      this.config = {
        ...this.config,
        data: tableData,
      };
    },

    // 格式化标题，过长时显示省略号
    formatTitle(title) {
      if (!title) return "--";
      return title.length > 20 ? title.substring(0, 20) + "..." : title;
    },

    // 格式化截止时间
    formatDeadlineTime(timeStr) {
      if (!timeStr) return "--";
      // 从 "2025-12-31 23:59:59" 格式化为 "2025-12-31"
      return timeStr.split(" ")[0];
    },

    switper() {
      // 如果需要轮播切换tab，可以在这里实现
    },
  },
};
</script>

<style lang="scss" scoped>
.card {
  margin-top: 30px;
  height: 350px;
  display: flex;
  justify-content: center;
}

.table-container {
  height: calc(100% - 60px);
  padding-inline: 30px;
}

.time-tabs {
  width: 150px;
  margin-left: 50px;

  ::v-deep .el-radio-group {
    .el-radio-button {
      .el-radio-button__inner {
        background: linear-gradient(135deg, #1a3a5f 0%, #2d5278 100%);
        color: #bae7ff;
        border: 1px solid #2d5278;
        font-size: 12px;
        padding: 6px 12px;

        &:hover {
          color: #ffffff;
          background: linear-gradient(135deg, #2d5278 0%, #3a6ea5 100%);
        }
      }

      &.is-active {
        .el-radio-button__inner {
          background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
          color: #ffffff;
          border-color: #1890ff;
        }
      }
    }
  }
}

.custom-right {
  display: flex;
  gap: 8px;
}

// 滚动表格样式调整
.custom-scroll-board {
  ::v-deep .dv-scroll-board {
    .header {
      background: rgba(5, 64, 128, 0.8) !important;
    }

    .rows {
      .row-item {
        background: transparent !important;

        &:nth-child(odd) {
          background: rgba(10, 44, 94, 0.3) !important;
        }

        &:nth-child(even) {
          background: rgba(5, 64, 128, 0.2) !important;
        }

        .ceil {
          padding: 8px 4px;
        }
      }
    }
  }
}
</style>
